<template>
  <div style="width: 100%; height: 91%;align-items: center;" class="flex-column  background-img" v-loading="loading">
    <!-- 请选择查询的学校：<el-cascader :options="options" :show-all-levels="false" filterable="true"></el-cascader> -->

    <div id="div-1">
      <h2 id="h2-1">找导师更便捷，信息更全面</h2>
    </div>

    <div style="
        width: 78vw;
        border-radius: 16px;
        gap: 20px;
        align-items: center;
        justify-content: flex-start;
        margin-top: 40px;
      " class="flex-row">
      <div style="display: inline">
        <el-select v-model="level" placeholder="请选择学校层次" :size="selectSize" filterable clearable
          style="font-size: 16px; height: 40px">
          <el-option v-for="item in levels" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>

      <div style="display: inline">
        <el-select v-model="university" placeholder="请选择大学" :size="selectSize" allow-create filterable clearable>
          <el-option v-for="(item, index) in universities" :key="index" :label="item" :value="item">
          </el-option>
        </el-select>
      </div>

      <div style="display: inline">
        <el-select v-model="department" placeholder="请选择学院" :size="selectSize" allow-create filterable clearable>
          <el-option v-for="(item, index) in departments" :key="index" :label="item" :value="item">
          </el-option>
        </el-select>
      </div>
    </div>
    <div style="margin-top: 15px">
      <div class="flex-row">
        <div class="flex-row"
          style="width:70vw;height:60px;background-color: white;padding: 9px 24px;gap: 12px;align-items: center;">
          <div style="margin-right: 8px">
            <slot name="icon">
              <svg-icon iconClass="search"></svg-icon>
            </slot>
          </div>
          <div class="inputBox">
            <el-select class="inline-input" style="border: none;width: 65vw;font-size: 16px;" default-first-option
              v-model="supervisor" placeholder="输入想要查找的导师" :size="selectSize" filterable allow-create clearable>
              <el-option v-for="(item, index) in supervisors" :key="index" :label="item" :value="item">
              </el-option>
            </el-select>
          </div>
        </div>
        <el-button style="width: 8vw;height: 60px;background: #5179EF;color: white;text-align: center;"
          @click="getTeacherInfo">
          search
        </el-button>
      </div>
    </div>

  </div>
</template>

<script>
import SearchService from "@/service/SearchService";
import { Message } from 'element-ui';
export default {
  name: "MentorSearch",
  data() {
    return {
      loading:false,
      levels: [
        {
          label: "211",
          value: "211",
        },
        {
          label: "985",
          value: "985",
        },
        {
          label: "普通本科",
          value: "普通本科",
        },
        {
          label: "研究所",
          value: "研究所",
        },
        {
          label: "港澳台",
          value: "港澳台",
        },
      ],
      university: "",
      department: "",
      supervisor: "",
      universities: [],
      departments: [],
      supervisors: [],
      level: "",
      review: {},
      selectSize: "large",
    };
  },
  watch: {
    level() {
      this.GetUniversity();
    },
    university() {
      this.GetDepartment();
    },
    department() {
      this.GetSupervisor();
    },
    supervisor() { },
  },
  methods: {
    getTeacherInfo() {
      if (this.university!='' && this.department!='' && this.supervisor!='') {
        this.$router.push({ name: 'teacherDetail', params: { tType:0,university: this.university, name:this.supervisor, department: this.department } });
      }else{
        Message.info("需要选择学校以及学院")
      }
    },
    GetUniversity() {
      const info = { level: this.level };
      SearchService.GetUniversity(info).then((res) => {
        if (res.code == 0) {
          this.universities = res.data;
        }
      });
    },
    GetDepartment() {
      const info = { university: this.university };
      SearchService.GetDepartment(info).then((res) => {
        if (res.code == 0) {
          this.departments = res.data;
        }
      });
    },
    GetSupervisor() {
      const info = { university: this.university, department: this.department };
      SearchService.GetSupervisor(info).then((res) => {
        if (res.code == 0) {
          this.supervisors = res.data;
        }
      });
    },

  },
};
</script>

<style scope>
.el-select .el-input--medium .el-input__inner {
  height: 40px;
}

/* .background-img{
    background: url("../assets/icons/background1.png") center center no-repeat !important;
    background-size: 100% 100%;
 } */
#div-1 {
  width: 100vw;
  padding: 40px;
  background-color: rgb(226, 232, 240);
  font-size: 36px;
  font-weight: 700;
}

#h2-1 {
  font-size: 36px;
  font-weight: 700;
  padding-bottom: 32px;
  padding-top: 32px;
  text-align: center;
}

.inputBox>>>.el-input__inner {
  border: 0;
}
</style>
